<template>
  <div class="history-container">
    <van-nav-bar
      title="浏览历史"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="delete" @click="onClearHistory" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="history-list">
          <div v-for="(group, date) in groupedHistory" :key="date" class="date-group">
            <div class="date-title">{{ formatDate(date) }}</div>
            <div v-for="course in group" :key="course.id" class="course-item" @click="onViewCourse(course)">
              <div class="course-info">
                <div class="course-title">{{ course.name }}</div>
                <div class="course-desc">{{ course.description }}</div>
              </div>
              <div class="course-time">{{ course.viewTime }}</div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <!-- 清空历史确认弹窗 -->
    <van-dialog
      v-model:show="showClearDialog"
      title="提示"
      message="确定要清空浏览历史吗？"
      theme="round-button"
      @confirm="clearHistory"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 列表状态
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const showClearDialog = ref(false)

// 模拟历史记录数据
const mockHistory = {
  '2023-08-01': [
    {
      id: 1,
      name: '高中数学提高班 - 函数与导数专题',
      description: '针对高考重点难点，系统讲解函数与导数知识点，配套习题讲解和考点分析',
      image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      price: '299.00',
      originalPrice: '399.00',
      duration: '120分钟',
      viewTime: '20:30'
    },
    {
      id: 2,
      name: '英语口语训练营 - 零基础到流利表达',
      description: '从发音、语法到口语表达，全方位提升英语口语能力，配套真人外教一对一辅导',
      image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      price: '399.00',
      originalPrice: '599.00',
      duration: '90分钟',
      viewTime: '15:45'
    }
  ],
  '2023-07-31': [
    {
      id: 3,
      name: 'Python编程基础 - 从入门到实践',
      description: '零基础入门Python编程，通过实践项目掌握编程思维和技能，适合初学者',
      image: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      price: '499.00',
      originalPrice: '699.00',
      duration: '150分钟',
      viewTime: '18:20'
    }
  ]
}

const groupedHistory = ref(mockHistory)

// 格式化日期
const formatDate = (date) => {
  const today = new Date().toISOString().split('T')[0]
  const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0]

  if (date === today) {
    return '今天'
  } else if (date === yesterday) {
    return '昨天'
  }
  return date
}

// 加载更多
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      groupedHistory.value = {}
      refreshing.value = false
    }

    // 模拟加载更多数据
    groupedHistory.value = { ...groupedHistory.value, ...mockHistory }
    loading.value = false

    // 模拟数据加载完成
    finished.value = true
  }, 1000)
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  onLoad()
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 查看课程详情
const onViewCourse = (course) => {
  router.push(`/course/${course.id}`)
}

// 显示清空历史确认弹窗
const onClearHistory = () => {
  showClearDialog.value = true
}

// 清空历史记录
const clearHistory = () => {
  groupedHistory.value = {}
  showToast('已清空浏览历史')
}
</script>

<style lang="scss" scoped>
@use '../../styles/mixins.scss' as *;

.history-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 24px;

  .history-list {
    .date-group {
      margin-bottom: 12px;

      .date-title {
        padding: 12px 16px;
        font-size: 14px;
        color: #969799;
      }

      .course-item {
        background: #fff;
        padding: 12px 16px;
        margin-bottom: 1px;
        @include flex(row, space-between);

        .course-info {
          flex: 1;
          margin-right: 12px;
          overflow: hidden;

          .course-title {
            font-size: 15px;
            color: #323233;
            margin-bottom: 4px;
            @include text-ellipsis;
          }

          .course-desc {
            font-size: 12px;
            color: #969799;
            @include text-ellipsis;
          }
        }

        .course-time {
          font-size: 12px;
          color: #969799;
          white-space: nowrap;
        }
      }
    }
  }

  .empty-state {
    padding: 60px 0;
    text-align: center;

    .empty-icon {
      width: 120px;
      height: 120px;
      margin-bottom: 12px;
    }

    .empty-text {
      font-size: 14px;
      color: #969799;
    }
  }
}
</style>
